<script setup>
import {computed, reactive, ref} from "vue";

let isActive = ref(true)
let isB = ref(true)

// 动态绑定的class样式可以是一个对象
// const classObject = reactive({
//   active: true,
//   'text-danger': true
// })

// 返回一个计算属性
const error = ref(null)

// 通过计算属性返回一个对象
const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

// 多个属性可以绑定成一个对象
// 如果业务逻辑比较复杂可以使用计算属性
const activeColor = ref('red')
const fontSize = ref(30)
</script>

<template>
<!--  对象中可以有多个属性来表示样式-->
<!--  标签本身的class属性和动态绑定的class属性可以共存-->
  <div :class="{ active: isActive, b: isB }" class="a">class</div>

  <div :class="classObject"></div>

  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">style</div>
  <div :style="{ color: activeColor, 'font-size': fontSize + 'px' }">style</div>
</template>


<style scoped>
.b{
  color: red;
}

.a {
  background-color: pink;
}
</style>
